<template>
    <div>
         <van-nav-bar
            title="绿电溯源证书"
            left-text=""
            right-text="分享"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
        />
        <div class="elec-content">
            <div class="content-title">{{this.elecListInfo.title}}</div>
            <div class="content-echart">
                <div class="img1" v-show="img1"><img src="../assets/sunban.png" alt=""></div>
                <div class="img2" v-show='img2'><img src="../assets/sunban.png" alt=""></div>
                <div class="img3" v-show='img3'><img src="../assets/sunban.png" alt=""></div>
                <div class="img4" v-show='img4'><img src="../assets/sunban.png" alt=""></div>
                <div class="img5" v-show='img5'><img src="../assets/sunban.png" alt=""></div>
                <div class="img6" v-show='img6'><img src="../assets/sunban.png" alt=""></div>
                <div class="img7" v-show='img7'><img src="../assets/sunban.png" alt=""></div>
                <div class="img8" v-show='img8'><img src="../assets/sunban.png" alt=""></div>
                <div class="img9" v-show='img9'><img src="../assets/sunban.png" alt=""></div>
                <div class="img10" v-show='img10'><img src="../assets/sunban.png" alt=""></div>
            </div>
            <div class="content-box">
                <ul>
                    <li><span>桩名称：</span><span>{{this.elecList.stationName}}</span></li>
                    <li><span>订单时间：</span><span style="font-size:12px">{{this.elecList.orderCreateTime | formatDate}}—{{this.elecList.orderEndTime | formatDate}}</span></li>
                    <li><span>充电时长：</span><span>{{(this.elecList.orderEndTime-this.elecList.orderCreateTime) | formatDates}}</span></li>
                    <li>
                        <span>订单电量：</span><span class="span-spe">{{this.elecList.energy}}kwh</span>
                        <span>绿电量：</span><span class="span-spe">{{this.elecListInfo.energy}}kwh</span>
                        <span>占比：</span><span class="span-spe">{{this.elecListInfo.energyProportion}}</span>
                    </li>
                    <van-progress :percentage="this.baifen" stroke-width="8" color="#18C048" class="van-progress"/>
                </ul>
            </div>
        </div>
    </div>
   
</template>
<script> 
import jsBridge from '../utils/jsBridge'
import isWeixin from '../utils/isWeixin'
export default {
    data(){
        return {
            elecList:[],
            elecListInfo:[],
            baifen:'',
            img1:false,
            img2:false,
            img3:false,
            img4:false,
            img5:false,
            img6:false,
            img7:false,
            img8:false,
            img9:false,
            img10:false,
        }
    },
    created(){
        let url = "/grnetc/open/validationTokens";
        let params={
          token:"c:app:91E0324600BC43D7868D5CE26412EF78",
          greenElectricCode:"4208d9e4f9fbd924aee71e6969403b1eb6c5c50225a42f87a8f58c4e6a129f1279f20xcd49238c6c6fe2a787f4eb3f87d9ba66e54c7e9478b3a2b7ac6fd3771cbc2da31"       
        }
        this.$http({
            method:'post',
            url:url,
            data:params
        }).then(res=>{
            console.log(res)
            if(res.data.code == 1){
                this.elecList = res.data.data
                this.elecListInfo = res.data.data.distributedInfoDto
                if(this.elecList.category == 1){
                    this.$router.push('/Home')
                }
                if(this.elecList.category == 2){
                    this.$router.push('/')
                }
                let bai =this.elecList.distributedInfoDto.energyProportion 
                bai = bai.substr(0,bai.length-1);
                // bai = bai.replace['%',' ']
                console.log("wwwwww",bai)
                this.baifen = bai
                let imgcon = this.elecList.distributedInfoDto.count
                console.log(imgcon)
                if(imgcon == 1) this.img1 = true
                if(imgcon == 2) this.img1 = true,this.img2 = true
                if(imgcon == 3) this.img1 = true,this.img2 = true,this.img3 = true
                if(imgcon == 4) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true
                if(imgcon == 5) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true,this.img5 = true
                if(imgcon == 6) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true,this.img5 = true,this.img6 = true
                if(imgcon == 7) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true,this.img5 = true,this.img6 = true,this.img7 = true
                if(imgcon == 8) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true,this.img5 = true,this.img6 = true,this.img7 = true,this.img8 = true
                if(imgcon == 9) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true,this.img5 = true,this.img6 = true,this.img7 = true,this.img8 = true,this.img9 = true
                if(imgcon == 10) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true,this.img5 = true,this.img6 = true,this.img7 = true,this.img8 = true,this.img9 = true,this.img10 = true
            }
        })
        
        // this.$http(url,params).then(res=>{
        //     console.log(res)
       
        // })
    },
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      },
      formatDates: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return  m + ':' + s;
      }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onClickRight() {
        //   Toast('按钮');
        },
  },
}
 

</script>
<style scoped>
.elec-content{
    background: url('../assets/img_brd.png') no-repeat;
    /* background-color: #DBE8E1; */
    background-size: 100% 100%;
    height:100vh;
}
.content-title{
    width: 100%;
    height:50px;
    line-height: 50px;
    color: #fff;
    font-size: 26px;
    font-family: Noto Sans SC;
    text-align: center;
}
.content-echart{
    width: 100%;
    height:250px;
    margin-top: 50px;
    position: relative;
}
.img1{
    width: 28px;
    height:28px;
    position: absolute;
    left:150px;
    top:78px;
}
.img1 img{
    width: 100%;
}
.img2{
    width: 28px;
    height:28px;
    position: absolute;
    left:103px;
    top:110px;
}
.img2 img{
    width: 100%;
}
.img3{
    width: 28px;
    height:28px;
    position: absolute;
    left:129px;
    top:122px;
}
.img3 img{
    width: 100%;
}
.img4{
    width: 28px;
    height:28px;
    position: absolute;
    left:114px;
    top:150px;
}
.img4 img{
    width: 100%;
}
.img5{
    width: 28px;
    height:28px;
    position: absolute;
    left:203px;
    top:102px;
}
.img5 img{
    width: 100%;
}
.img6{
    width: 28px;
    height:28px;
    position: absolute;
    left:204px;
    top:62px;
}
.img6 img{
    width: 100%;
}
.img7{
    width: 28px;
    height:28px;
    position: absolute;
    left:78px;
    top:130px;
}
.img7 img{
    width: 100%;
}
.img8{
    width: 28px;
    height:28px;
    position: absolute;
    left:66px;
    top:160px;
}
.img8 img{
    width: 100%;
}
.img9{
    width: 28px;
    height:28px;
    position: absolute;
    left:113px;
    top:210px;
}
.img9 img{
    width: 100%;
}
.img10{
    width: 28px;
    height:28px;
    position: absolute;
    left:250px;
    top:146px;
}
.img10 img{
    width: 100%;
}
.content-box{
    width: 325px;
    margin: 10px auto;
    height:146px;
    /* padding-left:10px; */
    box-sizing:border-box;
    text-align:left;
}
.content-box ul{
    width: 100%;
}
.content-box ul li{
    padding:4px 5px;
    display: flex;
    align-items: center;
}
.content-box ul li span{
    height:16px;
    line-height: 16px;
    font-size: 13px;
    display: inline-block;
    font-family: Noto Sans SC;
}
.content-box ul li:nth-child(4) .span-spe{
   padding-right: 8px;
}
.van-progress{
    margin-top:5px;
    width: 96%;
    margin-left: 2%;
}

</style>